<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>分享奖励</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="/static/aui/css/css/amazeui.min.css">
    <link rel="stylesheet" href="/static/aui/css/css/app.css">
    <script type="text/javascript" src="/static/aui/css/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/aui/css/js/jquerys.min.js"></script>
    <script type="text/javascript" src="/static/aui/css/js/qrcode.js"></script>
    <!--<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>-->
</head>
<style>
    .am-form {
        width: 100%;
        height: 100%;
    }

    .group-top-box {
        width: 100%;
        height: 30%;
    }

    .group-top-box-le {
        width: 100%;
        height: 70%;
    }

    .group-top-box-bo {
        width: 200px;
        height: 200px;
        border: 1px solid #7ebbfc;
        border-radius: 100%;
        background: #7ebbfc;
        margin-left: 42%;
        align-content: center;
        line-height: 200px;
        float: left;
        font-size: 29px;
    }

    .top-box-tetx {
        width: 200px;
        height: 200px;
        background: #999;
        color: #000;
        float: left;
        font-size: 26px;
        margin-left: 42%;
    }

    .group-top-box-re {
        width: 100%;
        height: 30%;
    }

    .group-bottom-box {
        width: 100%;
        height: 70%;
    }

    html {
        height: 100%;
    }

    body {
        background: #EEEEEE;
        height: 100%;
    }

    * {
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
    }

    ul {

        list-style: none;
        overflow: hidden;
    }

    .content {
        height: 100%;
        width: 40%;
        min-width: 250px;
        overflow: hidden;
        margin: 0 auto;
        /* background:red; */
        position: relative;
    }

    @media screen and (max-width: 800px) {
        .content {
            width: 100%;
        }
    }

    .moneyBox {
        width: 150px;
        height: 150px;
        background: #80B9FC;
        border-radius: 50%;
        text-align: center;
        margin: 0 auto 20px;
        color: #FFFFFF;
    }

    .moneyBox p:first-child {
        padding-top: 45px;
    }

    .moneyBox p:last-child {
        font-size: 24px;
    }

    .floatLeft {
        margin: 10px 0;
    }

    .floatLeft li {
        float: left;
        width: 33%;
        text-align: center;
        color: #333333;
        font-size: 18px;
    }

    .listbox {
        width: 100%;
        background: #FFFFFF;
        overflow-y: auto;
    }

    .listbox > ul:first-child {
        font-weight: bold;
    }

    .listbox ul {
        display: flex;
        margin: -4px 0;
    }

    .listbox li {

        float: left;
        padding: 10px 0;
        flex: 1;
        text-align: center;
    }

    .r-list-ui {
        width: 100%;
        height: 30px;
        padding: 0px;
        text-align: center;
        display: inline-block;
    }

    .r-list-li {
        float: left;
        width: 33%;
        text-align: center;
        font-size: 18px;
    }

    .myQR {
        display: block;
        width: 100%;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        position: absolute;
        bottom: 0;
    }
</style>
<body onload="msguser()">
<div class="content">
    <div id="toubox" style="background:#E6E6E6;padding-top:20px;height:auto;">
        <div class="moneyBox">
            <p>累计分享奖励</p>
            <p>{$data.info.recommendtotaltree}</p>

        </div>
        <ul class="floatLeft">
            <li>
                <p>分享人数</p>
                <p>{$data.info.one}</p>


            </li>
            <li>
                <p>有效</p>
                <p>{$data.info.effective}</p>

            </li>
            <li>
                <p>无效</p>
                <p>{$data.info.invalid}</p>

            </li>
            <!--<li>-->
            <!--<p>分享人拥有资产</p>-->
            <!--<p>0</p>-->
            <!--</li>-->
        </ul>
    </div>
    <div class="r-list-ui">

        <div class="r-list-li">手机号码</div>
        <div class="r-list-li">分享人数</div>
        <div class="r-list-li">分享奖励</div>

    </div>

    <div id="listbox1" class="listbox" style="padding-bottom:45px;height:100%;">
        {volist name="data.list" id="item"}
        <ul>
            <li>{$item['phone']}</li>
            <li>{$item.num}</li>
            <li>{$item.reward_tree}</li>
        </ul>
        {/volist}
    </div>
    <a href="#" class="myQR" id="myQRc"></a>
</div>
</body>
</html>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/static/aui/css/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="/static/aui/assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="/static/aui/css/js/amazeui.min.js"></script>
<script src="/static/aui/css/js/app.js"></script>

<script>
    changeH();
    window.addEventListener("resize", function () {
        changeH();
    }, false);

    function changeH() {
        var bodyH = document.body.offsetHeight;
        var touH = document.getElementById('toubox').offsetHeight;
        var myQRc = document.getElementById('myQRc').offsetHeight;
        console.log(document.getElementById('listbox1').style.height = (bodyH - touH - myQRc) + "px")
    }


    function msguser() {


    }
</script>
